<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1——使用jsx创建DOM</title>
</head>
<body>
    <!--   准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom 用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript"  src="../js/babel.min.js"></script>
    
    
    <!--表示我写的不再是js而是jsx，靠babel来把js翻译为jsx-->
    <script type="text/babel"> //此处一定要写babel
       //1. 创建虚拟DOM
       const VDOM = <h1 id="title"> <span>Hello,React</span> </h1>
       //此处一定不要写引号，因为不是字符串
       //也可以写成（小括号内的内容是一个整体）：
      /* const VDOM =(
        <h1 id="title"> 
            <span>Hello,React</span> 
        </h1>//此处一定不要写引号，因为不是字符串

       )
       */
       //渲染虚拟DOM到页面
       //react-dom.render(虚拟DOM，容器)
       // 但是React并没有提供选择器的写法
       ReactDOM.render(VDOM,document.getElementById("test"))
       
    </script>
    
</body>
</html>